<template>
    <view>
        <view class="images">
            <view class="aBox">
                <image src="@/static/img/lv.jpg" mode="" class="image"></image>
                <image src="../static/img/lvs.jpg" mode="" class="image"></image>
                <image src="../static/img/huangguan_yin.png" class="huangguan"></image>
                <view class="text">骑猪追太阳</view>
            </view>
            <view class="bBox">
                <image src="../static/img/qing.jpg" mode="" class="miLmage"></image>
                <image src="../static/img/qings.jpg" mode="" class="miLmage"></image>
                <image src="../static/img/huangguan_jin.png" class="huangguan"></image>
                <view class="text">星河</view>
            </view>
            <view class="cBox">
                <image src="../static/img/qinglvs.jpg" mode="" class="image"></image>
                <image src="../static/img/qinglv.jpg" mode="" class="image"></image>
                <image src="../static/img/huangguan_tong.png" class="huangguan"></image>
                <view class="text">盗图大王</view>
            </view>
        </view>
        <view class="buBox">
            <view class="rankings">
                <view class="ranking">4</view>
                <view class="imagexs">
                    <image src="@/static/img/xxxx.jpg" mode="" class="imagex"></image>
                    <image src="@/static/img/xxxx.jpg" mode="" class="imagex"></image>
                </view>
                <view class="name">年年有今日</view>
            </view>

            <view class="quantitys">
                <view class="lv">Lv</view>
                <view class="quantity">666</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .images {
        width: 100%;
        background-color: #fe4b63;
        height: 50vw;
        display: flex;
        justify-content: space-around;
        align-items: center;

    }

    .image,
    .miLmage {
        width: 15vw;
        height: 15vw;
        border-radius: 50vw;

    }

    .aBox,
    .cBox {
        height: 10vw;
        position: relative;
    }

    .bBox {
        height: 30vw;
        position: relative;
    }

    .huangguan {
        width: 8vw;
        height: 8vw;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .text {
        color: #fff;
        text-align: center;
        font-size: 4vw;
    }

    .imagexs,
    .ranking {
        margin-right: 3vw;
    }

    .hongxin {
        margin-right: 1vw;
    }

    .imagex {
        width: 13vw;
        height: 13vw;
        border-radius: 50vw;
    }

    .buBox,
    .lv {
        margin: 2vw;
    }

    .buBox,
    .rankings,
    .quantitys {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ranking,
    .name {
        color: #c2c2c2;
        font-size: 5vw;
    }

    .quantity,
    .lv {
        color: #f5646d;
        font-size: 5vw;
    }
</style>